BOUWEN 


Beelden voorbereiden voor op het web 


Kleiner beeld biedt 


Als je beelden gaat optimaliseren voor webpublicatie, is de keuze van de correcte resolutie 


en afmetingen van je plaatjes cruciaal. De beelden moeten vlot te bekijken of te down- 


loaden zijn, terwijl de kwaliteit zo hoog mogelijk dient te blijven. 


Stap 1 
Schermresolutie 


Zowel de klassieke CRT-schermen als de hippe LCD-schermen 
werken in een resolutie van 96 dpi (dots of beeldpunten per inch) 
als je Windows gebruikt en 72 dpi bij een Mac-computer. De beeld- 
grootte kan echter wel sterk uiteenlopen. Als er een moderne gra- 
fische kaart in je computer zit en op je bureau een nieuwe moni- 


A - Clickx - over computer en internet - - Microsoft Internet Explorer 


Bestand Bewerken Beeld Favorieten Esta Help 


Adres [&) http://vww.clicksmagazine.be/ 
Clicks: 


magazine % | 


De update van je programmagids 


| nieuws 


U NIEUW: WEBKOMPAS 2! 


IM Nu in de betere boek- en krantenwinkel: het nieuwe 
WebkKompas 2. Een gloednieuw internethoek van Cli 
Magazine. In 292 kleurrijke pagina's krijg je enkel de 
Ed sites die het nette bieden heeft. Praktisch gerangsch 
per onderwerp, van mannensites over grappige sites 
onderwijs- en hobhysites. In totaal méér dan 1.000 
websites! Onmisbaar om je surftochten snel èn 
resultaatgericht te begeleiden. 


verkerdef 
uithoekér Van 
het web in 


websites 


640x480 pixels. 


F- Clickx - over computer en internet - « Microsoft Internet Explorer 


Bestand Bewerken Beeld Favorieten Extra Help 


Adres 


Clicks 
Nn De update van je programmagids. hmmm 


| nieuws 


|E) http://www. clickkmagazine.be/ 


Ee NIEUW: WEBKOMPAS 2! 


nieuw! 


Nu in de betere boek- en krantenwinkel: het nieuwe 
WebkKompas 2. Een gloednieuw internetbaek van Clickx 
Magazine. In 292 kleurrijke pagina's krijg je enkel de beste 
Mag sites die het nette bieden heeft. Praktisch gerangschikt 
per onderwerp, van mannensites over grappige sites tot 
onderwijs- en hobbysites. In totaal méér dan 1.000 
websites! Onmisbaar om je surftochten snel èn 
resultaatgericht te begeleiden. 
Verkerfsief 
uithoekéffVan 
het web in 


websites 


Spelletjes van eigen bodem. bij Hogeschool Gent 


&_ sx _# Online spelletjes spelen? Neem even een kijkje op de website van het 


Aa add de Hogeschool Gent. Daar vind je o.m. Vinci, volledig gemaakt door de Een, 
nm ú n studenten! Breg Internet 
' „nn jn een 


800x600 pixels. 


CLICKX MAGAZINE 23 - 10 SEPTEMBER 2002 


ETET en „lex 


Aben [ZE] hs men hamer be) 


EN De updste van je programmagids. mrd 


nieuws 


NIEUW: WEBKOMPAS 2 ! 
[bas in 4e betere boeke on kranterwtrdat het nieuwe 


Spelletjes van eigen bodem bij Hogeschool Gent 


4 > Onnen spedetjes spetan? Neem oven een bijge op de metde van 
Kathie de hogeschool Gark. Daar vind je o.m. Vinc, voren gemaakt doer de 


De ultieme en keken 


EJ 7 » 
Hen 


Providermonitor - voorjaar 2002 


Meer indo over onze hatjaarlijkze peowidermondoriest verschenen in Cächx Magazne 
810, vind je nier 


nieuws 


Jevstiek vaar san nrik 


1024x768 pixels. 


tor prijkt, kan je kiezen uit een hele reeks beeldgrootten. Toch is 
het over het algemeen zo, dat de fysieke grootte van je computer- 
scherm sterk de toegepaste beeldgrootte bepaalt. Als je nog werkt 
met een oud 14-inch scherm, zal dit waarschijnlijk ingesteld zijn 
op 640 x 480 pixels of 8oo x Goo pixels. 

Tegenwoordig werkt bijna iedereen met een 17-inch monitor. Deze 
werken prettig als je ro24 x 768 pixels als beeldgrootte kiest. 

Een grote 19-inch buis stel je gewoonlijk in op 1280 x 1024 pixels. 
Je ziet dus meer pixels op je scherm. Als je grafische toepassingen 
gebruikt, zal je dus bij een gelijke zoomfactor, een groter deel van 
een afbeelding op het scherm kunnen weergeven. Bij andere pro- 
gramma’s zoals Microsoft Word heeft de hogere afbeeldingsgrootte 
het voordeel dat je eveneens een groter deel van je document kan 
overzien terwijl de tekst toch leesbaar blijft. 


Stap 2 
Webpagina's 


Voor webpagina’s liggen de zaken echter wat complexer. De ont- 
werper van een website kan bepalen in welke beeldgrootte je zijn 
werk te zien krijgt. Iedereen die een 17- of 19-inch monitor gebruikt, 
kent het fenomeen. De webpagina vult niet je hele scherm maar 
wordt kleiner weergegeven dan theoretisch mogelijk zou zijn. Vaak 
krijg je ook een waarschuwing in de volgende trant: ‘Deze webpa- 
gina is geoptimaliseerd voor 800 x Goo pixels.” De ontwerper komt 
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tegemoet aan de gebruikers van oudere en kleinere monitoren zo- 
dat onnodig rollen met het beeld (scrollen) vermeden wordt. Het 
overgrote deel van de webpagina’s is inderdaad geoptimaliseerd 
voor een beeldgrootte van 800 x Goo pixels. Dat houdt dus in dat 
je slechts zeer zelden beelden groter dan 800 x Goo pixels op een 
webpagina zal aantreffen. Een afbeelding wordt in een browser na- 
melijk steeds op ware grootte weergegeven. Je foto of tekening zou 
zo wel eens groter kunnen zijn dan je pagina! Als je een aantrek- 
kelijke en overzichtelijke lay-out maakt, zullen de afbeeldingen al- 
tijd gevoelig kleiner zijn. 


Stap 3 
Digitale beelden maken 


Als je je webpagina wil verfraaien, kan je zogenaamde fotobiblio- 
theken op cd gebruiken. Voor weinig geld koop je in één klap dui- 
zenden of tienduizenden rechtenvrije foto’s. Maar het spreekt voor 
zich dat je ook je eigen werk op het net kan publiceren. Dat kan het 
makkelijkste als je over een digitale camera beschikt. Uit het in- 
leidend stukje over schermresolutie zou je kunnen afleiden dat je 
met een zeer goedkoop toestel met lage resolutie al heel goed uit 
de voeten kan. Hoewel de resolutie op zich wel voldoende is, val- 
len de precisie van de belichting, de scherpte en de kleurweergave 
van de instapmodellen vaak tegen. 

Als je je camera uitsluitend gebruikt voor het maken van webfo- 
to’s, opteer je het best voor een apparaat uit de middenklasse. Deze 
toestellen hebben wat meer opnamemogelijkheden en je kan de 2- 
of 3-megapixelbeelden natuurlijk gemakkelijk verkleinen: de scherp- 
te en algemene beeldkwaliteit zal alleen maar toenemen. Je kan 
met de meeste toestellen ook plaatjes in lagere resoluties schieten. 
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Bovendien kan je een deel van een beeld met hoge resolutie ko- 
piëren en zonder verdere manipulatie publiceren. 

Ook als je kiest om foto’s met een scanner te digitaliseren, gaat 
deze redenering op. De resolutie van de allergoedkoopste scanners 
is meer dan voldoende om webfoto’s te produceren, ook als je ori- 
gineel slechts de grootte van een pasfoto heeft. De kleur- en con- 
trastweergave stellen vaak wat teleur en ook qua mogelijkheden 
scoren de goedkoopste toestellen wat minder. 


Stap 4 
Beelden bewerken 


De herkomst van beelden kan dus erg uiteenlopen: cd, digitale ca- 
mera of scanner. Je zal ook heel wat verschillende bestandsforma- 
ten tegenkomen: tif, jpg, gif enz… Om de beelden klaar te maken 
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CRT-scherm: Cathode Ray Tube of 
kathodestraalbuis. Glazen trechter- 
vormige elektronische beeldbuis. 
Aan de achterzijde van de kathode- 
buis (CRT) bevinden zich drie elek- 
tronenkanonnen, 1 voor elk van de 
drie primaire kleuren die beelden op 
het scherm schrijven. 


LCD-scherm: Liquid Crystal Display. 
Een technologie waarbij ieder beeld- 
puntje van een scherm uit een heel 


ondersteund. 
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klein vloeibaar kristal bestaat. Door 
een aantal kristalletjes onder stroom 
te zetten, kan er licht worden afge- 
straald en ontstaat er een beeld. 


Tif-formaat: Tagged Image File 
Format. Een grafisch bestandsfor- 
maat dat speciaal is ontworpen voor 
lay-outtoepassingen en dat door alle 
grafische programma’s wordt 
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Photo Editor van Microsoft. 


JP(E)G 


De overgrote meerderheid van de foto's die je op het internet 
tegenkomt, zijn jp(e)g-beelden. Het zijn 24-bit beelden die alle 
nuances in kleur en contrast van je foto's goed kunnen weerge- 
ven. Als je je foto's opslaat als jpg, worden de bestanden ge- 
comprimeerd en gaat er eveneens informatie verloren. Dit ver- 
lies manifesteert zich echter niet zozeer als een beperking in 
kleurschakeringen, maar eerder als vermindering in de detail- 
weergave. Dit zie je pas als je de beelden extreem gaat compri- 
meren. 

De mate waarin je de beelden gaat ‘samenpersen’, hangt af van 
de snelheid van de internetverbinding van je publiek. Als je over 
een breedbandverbinding beschikt, kan je snel grote bestanden 
binnenhalen. Veel internauten surfen echter nog steeds met 
een klassieke modem. Het is dus belangrijk om een gulden mid- 
denweg te vinden tussen beeldkwaliteit en downloadsnelheid. 
De gebruikers van Adobe PhotoShop maar ook van het veel 
goedkopere Adobe PhotoShop Elements kunnen bij het opslaan 
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voor het net, kan je speciaal daarvoor ontwikkelde programma’s 
zoals Adobe ImageReady gebruiken. Maar zelfs met de allereen- 
voudigste foto-editor zoals Microsoft Photo Editor die je gratis bij 
het Office-pakket vindt, kan je al heel goed uit de voeten. 

Voor je begint te sleutelen aan je beelden, moet je dus al een vrij 
goed idee hebben van de lay-out van je webpagina. Ga je kleine 
thumbnails aanmaken waarop je later kan doorklikken? Of publi- 
ceer je een grotere foto die als openingsbeeld van je website dient? 
Terwijl je aan je website bouwt, zal je vaak de fysieke grootte van 
de beelden nog veranderen. Het is dus verstandig om de origine- 
len niet te wissen maar te bewaren in een map op je harde schijf. 
Als je eenmaal de precieze grootte van je beelden bepaald hebt, zal 
je moeten kiezen in welk bestandsformaat en compressieniveau je 
de beelden gaat opslaan. Als resolutie kies je natuurlijk steevast 
voor 72 dpi: de standaard resolutie voor schermpresentatie. De 
grootte hangt af van je lay-out. Het bestandsformaat dat je zal ge- 
bruiken, is voor een groot deel afhankelijk van de aard van het ori- 
gineel (zie kaderstukjes). 
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Voor een beeld van 500x375 
pixels is de downloadtijd met 
een 56K-modem en kwaliteitsniveau 12 (232 kB) 41 seconden, re- 
latief lang dus. Kiezen we compressieniveau 5, dan is de tijd 
nog maar 9 seconden, terwijl de beeldkwaliteit op het scherm 
nog redelijk aanvaardbaar blijft. Voor een beeld van 250 x 188 
pixels (18 kB) zijn deze waarden respectievelijk 12 en 3 seconden. 
Je kan de beelden standaard als baseline (vast) bewaren, maar 
opslaan als ‘progressief’ beeld is beter voor gebruik op het web. 
Bij progressieve jpg's zal de ongeduldige surfer vrijwel onmid- 
dellijk een ruw beeld op het scherm zien dat na verloop van tijd 
steeds fijner wordt opgebouwd. 
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Het Gif-bestandsformaat wordt voor- 
namelijk gebruikt voor kleine vector- 
afbeeldingen zoals logo's en illustra- 
ties. Als je echter 24-bit foto's (oor- er - 
spronkelijk bijvoorbeeld bewaard in Diner: [Dittuston zl 
tif- of jpg-formaat) opslaat als gif-be- MN nt” 
stand, gaan er gegevens verloren 
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andere woorden: de 16 miljoen kleuren van een foto reduceer je tot 256 
tinten of minder. De beeldkwaliteit, voornamelijk de kleurweergave, van 
je foto's gaat er dus op achteruit. Alleen voor de allerkleinste thumbnails 
is het dus een goed bestandsformaat. 


PNG 


Een wat minder bekend bestandsformaat is png 
(Portable Networks Graphic). Png combineert 
de pluspunten van gif en jpg. De beelden wor- 
den opgeslagen met compressie maar zonder 
verlies. De 24-bit kleurgegevens blijven behou- 
den. Het belangrijkste nadeel van png is dat 
heel wat oudere webbrowsers png niet onder- 
steunen. 
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Veel succes! 
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Thumbnail: Een miniatuurafbeelding in postzegelformaat. 
Zulke thumbnails worden op internetpagina's gebruikt om 
te verwijzen naar de grotere afbeelding. Als je er op klikt 
wordt de pagina geopend waarop het grote plaatje staat. 
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